@page "/arc-gauge"
@using Radzen

<h1>Radzen Blazor Arc Gauge</h1
<RadzenExample Name="ArcGauge" DocumentationUrl="https://www.radzen.com/documentation/blazor/gauge/" Heading="false">
<div class="row">
    <div class="col-md-6 col-sm-12 p-4">
        <RadzenArcGauge Style="width: 100%; height: 250px;">
            <RadzenArcGaugeScale Step="20" Min="0" Max="260" MinorStep="2" Radius="1.5" TickPosition=@tickPosition Y="0.9" Margin="0">
                <RadzenArcGaugeScaleValue Value=@value ShowValue=@showValue>
                    <Template Context="pointer">
                        <h4>
                            @pointer.Value <sup>km/h</sup>
                        </h4>
                    </Template>
                </RadzenArcGaugeScaleValue>
            </RadzenArcGaugeScale>
        </RadzenArcGauge>
    </div>
    <div class="col-md-6 col-sm-12 p-4">
        <p>
            <label>Value <RadzenSlider Min="0" Max="260" @bind-Value=@value /></label>
        </p>
        <p>
            <label>Show the pointer value <RadzenCheckBox @bind-Value=@showValue /></label>
        </p>
        <p>
            <label>Tick position <RadzenDropDown @bind-Value=@tickPosition Data=@tickPositions /> </label>
        </p>
    </div>
</div>
</RadzenExample>

@code {
    bool showValue = true;
    double value = 100;
    IEnumerable<GaugeTickPosition> tickPositions = Enum.GetValues(typeof(GaugeTickPosition)).Cast<GaugeTickPosition>();
    GaugeTickPosition tickPosition = GaugeTickPosition.Outside;
}